import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles'
import toTop from '../../assets/toTop.png'
import feedback from '../../assets/feedback.png'
import Feedback from './Feedback'
import { connect } from 'react-redux'

const styles = theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    width: '85%',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  toTop: {
    position: 'fixed',
    bottom: 15,
    right: 10,
    opacity: 0.5,
    display: 'flex',
    flexDirection: 'column'
  },
  img: {
    width: 50,
    marginTop: 5
  },
  dialog: {
    width: '80%',
    maxHeight: 435,
  },
})
@connect(mapStateToProps)
@withStyles(styles)
class HelperBar extends Component {
	constructor(props) {
	  super(props)
	}

  toggle() {
    this.props.setShowFeedback(!this.props.showFeedback);
  }

  render() {
    const {classes, showFeedback} = this.props
  	return (
        <div className={classes.root}>
          <div className={classes.toTop}>
            <img title="意见反馈" src={feedback} alt="feed back" className={classes.img} onClick={this.toggle.bind(this)} />
            <a href="#">
              <img title="返回顶部" src={toTop} alt="back to top" className={classes.img} />
            </a>
          </div>
          <Feedback
              classes={{
                paper: classes.dialog,
              }}
              open={showFeedback}
              onRequestClose={this.toggle.bind(this)}
              value={'this.state.value'}
            />
        </div>
      )
    }
}

function mapStateToProps( state ) {
  return {
    showFeedback: state.site.showFeedback
  }
}

export default HelperBar